<template>
  <div>
    <div class="m-panel bg-w mh-pd">
      <div class="panel-head">
        <h4>未备注列表 (<span>男0</span> <span>女0</span>)</h4>
      </div>
      <div class="panel-content" v-if="recentContacter">
        <friend-list :items="recentContacter"> </friend-list>
      </div>
    </div>

<!--     <div class="m-panel bg-w mh-pd">
      <div class="panel-head">
        <h4>未备注列表 (<span>男25</span> <span>女12</span>)</h4>
      </div>
      <div class="panel-content" v-if="recentContacter">
        <friend-list :items="recentContacter"> </friend-list>
      </div>
    </div> -->

<!--     <div class="m-panel bg-w mh-pd">
      <div class="panel-head">
        <h4>查找
          <div class="mui-pull-right flex search-rt">
            <label>姓名</label>
            <input type="text" placeholder="请输入姓名">
          </div>
        </h4>
      </div>
      <div class="panel-content">
        <ul class="res-list">
          <li class="list-item" v-for="item in searchResult" :key="item.id">
            <div class="flex sw-item">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.pic" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" :class="[item.sex === 1 ? 'boy' : 'girl']" v-text="item.name">用户名</p>
                <p class="con-rest mui-ellipsis">{{item.age}}岁|{{item.edu}}|{{item.level}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div> -->
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import FriendList from '@/components/hn-list/friends-list'
  export default {
    name: "my-friend",
    data () {
      return {
        swiperOptionFilt: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 3,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        recentContacter: [
          // {
          //   id: '10001',
          //   pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          //   name: '章叁',
          //   sex: 2,
          //   edu: '本科',
          //   level: 'A+',
          //   age: 23
          // }
        ],
        searchResult: [
          // {
          //   id: '10004',
          //   pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4107980403,3961408622&fm=26&gp=0.jpg',
          //   name: '胡六',
          //   sex: 1,
          //   edu: '本科',
          //   level: 'A+',
          //   age: 23
          // }
        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    components: {
      swiper,
      swiperSlide,
      FriendList
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(3rem, 3rem)
  }
  .panel-head {
    h4,h4>span {
      @include sc(1.5rem, #333);
      font-weight: bold;
    }
  }
  .panel-content {margin-top: .5rem;}
  .con-rest {position: relative;@include sc(1.2rem, #999)}
  .con-name {position: relative;@include sc(1.3rem, #333)}
  .panel-content .m-sw {margin-right: 0;}
  .m-sw {width: 33%!important;margin-right: 0!important;}
  .boy:after,.girl:after {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    content: '';
    vertical-align: middle;
  }
  .boy:after {
    background: url("../../assets/images/hnico/ic_boy.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .girl:after {
    background: url("../../assets/images/hnico/ic_girl.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .search-rt {
    label {
      font-size: 1.1rem;
      color: #666;
      &:after {
        display: inline-block;
        content: '';
        margin-left: .4rem;
        border-top: .7rem solid #e685aa;
        border-left: .5rem solid transparent;
        border-right: .5rem solid transparent;
      }
    }
    input {
      width: 9.3rem;
      height: 1.7rem;
      margin-left: .6rem;
      margin-bottom: 0;
      border: .05rem solid #eee;
    }
  }
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(3rem, 3rem)
  }
  .con-rest {position: relative;@include sc(1.2rem, #999)}
  .con-name {position: relative;@include sc(1.3rem, #333)}
  .res-list {padding-top: .4rem;}
</style>
